<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}" />
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}" />
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <script th:src="@{/plugins/layui/layui.js}"></script>
    <title>物流结算</title>
</head>
<body>
<div class=" page-content clearfix">
    <div id="products_style">
        <div class="search_style">
            <div class="layui-form layui-form-item">
                <div class="layui-inline">
                    <div class="layui-form-mid">运货单号:</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" autocomplete="off" class="layui-input" id="invoice">
                    </div>
                    <button id="select" class="layui-btn layui-btn-blue query">查询</button>
                </div>
            </div>
            <div class="border clearfix">
           <span class="l_f">
           </span>
            </div>
            <table id="demo" lay-filter="demo"></table>
            <script>
                var tablelist;
                layui.use('table', function(){
                    var table = layui.table;
                    //第一个实例
                    table.render({
                        elem: '#demo'
                        ,url: '/settlement/list2' //数据接口
                        ,page: true //开启分页
                        ,cols: [
                            [ //表头
                                {field: 'orderId', title: '订单编号', sort: true}
                                ,{field: 'settlement', title: '结算状态', sort: true,templet:sStatus}
                                ,{fixed: 'right',title: '操作', align:'center', toolbar:"#barDemo"}
                            ]
                        ]
                        ,parseData: function(res){ //res 即为原始返回的数据
                            return {
                                "code":0, //解析接口状态
                                "msg": "", //解析提示文本
                                "count": res.total, //解析数据长度
                                "data": res.records //解析数据列表
                            };
                        }
                    });

                    function sStatus(data) {
                        var settlement = data.settlement;
                        var btns = "";
                        if(settlement == "已结算"){
                            return "已结算";
                        }
                        if(settlement == "未结算"){
                            btns += '<a class="" style="color:#ed2a4a">未结算</a>';
                        }
                        return btns;
                    }


                });

            </script>
            <script type="text/html" id="barDemo">
                {{#  if(d.settlement == "未结算" ){ }}
                <a title="结算" class="btn btn-xs btn-info" lay-event="edit">结算</a>
                {{# }if(d.settlement == "已结算") { }}
                <a title="已结算" class="btn btn-xs layui-btn-disabled" lay-event="">已结算</a>
                {{#  } }}
            </script>
        </div>
    </div>
</body>
</html>

<script>
    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.jquery;
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.confirm('请确定是否结算', function (index) {
                    $.ajax({
                        url : '/settlement/update',
                        type : 'post',
                        data: {'id':data.id},
                        dataType : 'json',                          //表示服务器返回给我们的数据是json格式
                        success : function (data) {
                            if (data) {
                                layui.table.reload("demo");
                            }
                        },

                    })
                    layer.close(index)
                });
            }


        });
        $("#select").click(function () {
            var invoice = $("#invoice").val();
            table.reload('demo',{
                url:'/settlement/list2'
                ,request:{
                    pageName:'page'
                    ,limitName:'limit'
                }
                ,where:{
                    'invoice':invoice
                }
                ,page: {
                    curr:1
                }
            })
        });
    });

</script>